$transfer-panel: (
    border-color: #{getCssVar('editor-default-border-color')},
    border-radius: #{getCssVar(border, radius, extra, small)},
    width: 200px,
    header-height: 40px,
    header-bg-color: #{getCssVar(color, fill, 0)},
    footer-height: 40px,
    body-height: 278px,
    item-height: 30px,
    filter-height: 32px,
    spacing-base: #{getCssVar(spacing, base)},
);

@include b('transfer-panel') {

    @include set-component-css-var('transfer-panel', $transfer-panel);

    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: getCssVar('transfer-panel', 'width');
    max-height: 100%;
    overflow: hidden;
    text-align: left;
    vertical-align: middle;
    background: getCssVar('color', 'bg', 2);

    @include e('header') {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: getCssVar('transfer-panel', 'header-height');
        padding-left: getCssVar('transfer-panel', 'spacing-base');
        margin: 0;
        color: getCssVar('color', 'text', 1);
        background: getCssVar('transfer-panel', 'header-bg-color');
        border: 1px solid getCssVar('transfer-panel', 'border-color');
        border-top-left-radius: getCssVar('transfer-panel', 'border-radius');
        border-top-right-radius: getCssVar('transfer-panel', 'border-radius');

        .el-checkbox {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;

            .el-checkbox__label {
                font-size: getCssVar('font-size', 'header-5');
                font-weight: 400;
                color: getCssVar('color', 'text', 1);

                span {
                    position: absolute;
                    top: 50%;
                    right: getCssVar('transfer-panel', 'spacing-base');
                    font-size: getCssVar('font-size', 'regular');
                    font-weight: 400;
                    color: getCssVar('color', 'text', 3);
                    transform: translate3d(0, -50%, 0);
                }
            }
        }
    }

    @include e('body') {
        height: getCssVar('transfer-panel', 'body-height');
        overflow: hidden;
        border-right: 1px solid getCssVar('transfer-panel', 'border-color');
        border-bottom: 1px solid getCssVar('transfer-panel', 'border-color');
        border-left: 1px solid getCssVar('transfer-panel', 'border-color');
        border-bottom-right-radius: getCssVar('transfer-panel', 'border-radius');
        border-bottom-left-radius: getCssVar('transfer-panel', 'border-radius');
    }

    @include e('filter') {
        --el-input-height: #{getCssVar('transfer-panel', 'filter-height')};

        box-sizing: border-box;
        padding: getCssVar('transfer-panel', 'spacing-base');
        text-align: center;

        .el-icon {
            font-size: inherit;
        }
    }

    @include e('content') {
        width: 100%;
        height: getCssVar('transfer-panel', 'body-height');
        padding: 6px 0;


        @include when('filterable') {
            height: calc(100% - #{getCssVar('transfer-panel-filter-height')} - #{getCssVar('transfer-panel', 'spacing-base')} * 2);
            padding-top: 0;
        }
    }

    @include e('list') {
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        overflow: auto;
        list-style: none;
    }

    @include e('item') {
        height: getCssVar('transfer-panel', 'item-height');
        padding-left: getCssVar('transfer-panel', 'spacing-base');
        line-height: getCssVar('transfer-panel', 'item-height');

        &.el-checkbox {
            --el-checkbox-font-size: #{getCssVar('font-size', 'regular')};

            display: flex;
            align-items: center;
            color: getCssVar('color', 'text', 0);

            .el-checkbox__label {
                box-sizing: border-box;
                display: block;
                width: 100%;
                padding-left: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .el-checkbox__input {
            position: absolute;
        }

    }

    @include e('empty') {
        padding: 6px 15px 0;
        margin: 0;
        text-align: center;

        .#{bem('no-data')} {
            &.el-empty {
                justify-content: flex-start;
                padding: 0;
            }

            .el-empty__image {
                width: 52px;
            }
        }
    }

    .el-checkbox__inner {
        width: 1em;
        height: 1em;
        border-radius: 3px;
    }

    .el-checkbox__label {
        padding-left: getCssVar('spacing', 'tight');
    }
}